<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('复合型密码输入框')}`">{{ $t('复合型密码输入框') }}</t>
            <li>
                通过<span class="d-code">#prepend</span>插槽，你可以在输入框头部嵌入任意内容；
                同样地，<span class="d-code">#append</span>插槽，可以在输入框尾部嵌入任意内容
            </li>
        </template>
        <div style="width: 300px;">
            <p>
                <sib-item v-model="value" :props="props">
                    <template #prepend>密码</template>
                </sib-item>
            </p>
            <sib-item v-model="value" :props="props">
                <template #append>
                    <el-button>登录</el-button>
                </template>
            </sib-item>
        </div>
    </example>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const value = ref(null);
        const props = reactive({ type: 'password' });

        return {
            props,
            value,
            templateString: `<template>
    <sib-item v-model="value" :props="props">
        <template #prepend>密码</template>
    </sib-item>

    <sib-item v-model="value" :props="props">
        <template #append>
            <el-button>登录</el-button>
        </template>
    </sib-item>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const value = ref(null);
        const props = reactive({ type: 'password' });

        return { props, value };
    },
};
<\/script>`,
        };
    },
};
</script>
